<script setup lang="ts">
import monitoringData from '@/pointsDatas/monitoring.json';

const props = defineProps({
  modelCode: {
    type: String,
    default: '小海子产业园'
  }
})
let tableData = ref([])
tableData.value = monitoringData.filter(obj => obj.parkName === props.modelCode);
watch(() => props.modelCode, (newVal) => {
  console.log(newVal)
  tableData.value = monitoringData.filter(obj => obj.parkName === newVal);
  console.log(tableData.value)
})
// 历史轨迹
const monitoringPos = (row) => {
  window.newThree.flyToMonitoring(row.deviceName)
}
</script>

<template>
  <el-table style=" width: 100%;background-color: transparent" max-height="500" :data="tableData" stripe>
    <el-table-column prop="deviceName" label="摄像机名称"/>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" @click="monitoringPos(scope.row)">
          定位
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="less">
:deep(.el-table__fit) {
  background-color: transparent !important;
}

:deep(.el-table__inner-wrapper) {
  background-color: transparent !important;

  * {
    background-color: transparent !important;
    text-align: center;
    color: white;
  }

  *::before {
    background-color: transparent !important;
  }
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
</style>
